<template>
  <div class="basetable" v-loading="loading" element-loading-text="拼命加载中">
    <el-header class="edit_head" style="height:100%;display:flex;flex-wrap: wrap;">
      <el-button size="small" type="primary" @click="deriveClick" style="margin-bottom:20px;">导出</el-button>
      <div style="widht:400px;margin-left: 20px; display:flex;margin-bottom:20px;justify-content: space-between;width: 500px;" class="divsearch">
        <span class="spansearch" style="line-height: 40px; margin-right:30px;width:60px">班级筛选</span>
        <el-select @change="selectGet($event)" style="width:150px;height:28px" v-model="value" placeholder="请选择">
          <el-option
            style="height:100%"
            v-for="item in classId"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      <el-button style="margin-left: 20px;" size="mini" type="primary" @click="Clearfiltera">清除筛选条件</el-button>
      </div>
      <div style="margin-left: 20px;margin-bottom:20px;" class="divsearch">
        <span style="width:35px" class="spansearch">姓名</span>
        <el-input
          placeholder="姓名搜索"
          style="width: 100px; margin-left: 16px"
          @input="searchClickname"
          clearable
          v-model="inputname"
        >
        </el-input>
      </div>
      <div class="divsearch" style="margin-bottom:20px;">
        <span style="width:60px" class="spansearch">身份证号</span>
        <el-input
          placeholder="身份证号搜索"
          style="width: 200px; margin-left: 16px"
          @input="searchClickuser_code"
          clearable
          v-model="inputuser_code"
        >
        </el-input>
      </div>
      <div class="divsearch" style="margin-bottom:20px;">
        <span style="width:60px" class="spansearch">手机号码</span>
        <el-input
          placeholder="手机号码搜索"
          style="width: 200px; margin-left: 16px"
          @input="searchClickmobile"
          clearable
          v-model="inputmobile">
        </el-input>
      </div>
    </el-header>
    <el-table ref="filterTable" :data="tableDataEnd" border style="width: 100%">
      <el-table-column type="index" width="50" label="序号" fixed></el-table-column>
      <el-table-column prop="username" label="班级"></el-table-column>
      <el-table-column prop="username" label="姓名" width="90"></el-table-column>
      <el-table-column prop="user_code" label="身份证号码" width="180"></el-table-column>
        <el-table-column prop="mobile" label="手机号码" width="160"></el-table-column>      
        <el-table-column prop="certify_img" label="证书" width="160">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.certify_img" @click="successClick(scope.$index, scope.row)">已上传，点击查看</el-tag>
            <el-tag type="warning" v-else @click="uploadClick(scope.row)">未上传，点击上传</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="minzu" label="名族" width="60"></el-table-column>
        <el-table-column prop="age" label="年龄" width="60"></el-table-column>
        <el-table-column label="性别" width="60">
          <template slot-scope="scope">
            <el-tag type="text" effect="light" v-if="scope.row.sex==1">男</el-tag>
            <el-tag effect="light" v-if="scope.row.sex==2">女</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="婚姻状况"  width="80">
          <template slot-scope="scope">
            <el-tag type="text" effect="light" v-if="scope.row.mer_status==1">已婚</el-tag>
            <el-tag effect="light" v-if="scope.row.mer_status==2">未婚</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="就业情况" width="80">
          <template slot-scope="scope">
            <el-tag type="text" effect="light" v-if="scope.row.job_status==2">已就业</el-tag>
            <el-tag type="text" effect="light" v-if="scope.row.job_status==1">未就业</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="learn_level" label="文化程度"></el-table-column>
        <el-table-column prop="birth" label="出生日期" width="120"></el-table-column>
        
        
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
    </el-table>
    <!-- 编辑 -->
      <el-dialog title="个人信息" :visible.sync="dialogVisible" width="650px" :before-close="handleClose">
        <!-- <EditDialog :formLabelAlign="formLabelAlign" :disabledInput="disabledInput"></EditDialog> -->
        <el-form class="abc" :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
        <el-form-item label="姓名">
          <el-input v-model="formLabelAlign.username"></el-input>
        </el-form-item> 
        <el-form-item label="身份证号">
          <el-input v-model="formLabelAlign.user_code"></el-input>
        </el-form-item>
        <el-form-item label="名族">
          <el-input v-model="formLabelAlign.minzu"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="formLabelAlign.age"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio v-model="radio1" label="1" @change="getValue()">男</el-radio>
          <el-radio v-model="radio1" label="2" @change="getValue()">女</el-radio>
        </el-form-item>
        <el-form-item label="出生日期">
          <el-input v-model="formLabelAlign.birth"></el-input>
        </el-form-item>
        <el-form-item label="婚姻状况">
          <el-radio v-model="radio2" label="1" @change="getValue()">已婚</el-radio>
          <el-radio v-model="radio2" label="2" @change="getValue()">未婚</el-radio>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="formLabelAlign.mobile"></el-input>
        </el-form-item>
        <el-form-item label="文化程度">
          <el-input v-model="formLabelAlign.learn_level"></el-input>
        </el-form-item>
        <el-form-item label="就业情况">
          <el-radio v-model="radio3" label="2" @change="getValue()">已就业</el-radio>
          <el-radio v-model="radio3" label="1" @change="getValue()">未就业</el-radio>
        </el-form-item>
        <el-form-item label="id">
          <el-input v-model="formLabelAlign.id" :disabled="true"></el-input>
        </el-form-item>
      </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="edit">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 导出 -->
      <!--  -->
      <el-dialog
        title="导出片段"
        :visible.sync="dialogVisibletwo"
        width="50%"
        :before-close="handleClose"
      >
        <div>
          <div style="margin: 15px 0;"></div>
          <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
            <el-checkbox v-for="(item,v) in cities" :label="item" :key="v">{{ item.name }}</el-checkbox>
          </el-checkbox-group>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisibletwo = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisibleClick">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 查看证书 -->
      <el-dialog
        title="证书"
        :visible.sync="dialogVisibleSucc"
        width="30%"
        :before-close="handleClose"
      >
      <el-form :model="form">
        <el-form-item label="证书照片">
          <img class="chackimg" :src="avatarimg" alt="">
          
        </el-form-item>
        <el-form-item label="证书编号">
          <el-input
            v-model="form.certify_code"
            auto-complete="on"
            style="width: 50%"
          ></el-input>
        </el-form-item>
      </el-form>
        <el-button type="primary" @click="dialogVisibleSucc = false">确 定</el-button>
      </el-dialog>
      <!-- 上传 -->
      <el-dialog
        title="上传证书"
        :visible.sync="dialogVisibleUpload"
        width="60%"
        :before-close="handleClose"
      >
        <el-upload
            class="avatar-uploader"
            action="http://px.0123china.cn/api/v1.upload/up"
            :multiple="false"
            :show-file-list="false"
            :limit="1"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img  v-if="pic" :src="pic" class="avatar" />
            <i  class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        <el-form ref="form"  label-width="80px">
            <el-form-item label="证书编号">
              <el-input placeholder="请输入证书编号" v-model="zscode"></el-input>
            </el-form-item>
        </el-form>
        <el-form class="abc" :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
        </el-form>
        <el-button @click="dialogVisibleUpload = false">取 消</el-button>
        <el-button :plain="true" type="primary" @click="uploda">确 定</el-button>
      </el-dialog>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 25, 50,100]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalItems"
    >
    </el-pagination>
  </div>
</template>
    
<script>
import axios from 'axios';
const cityOptions = ["姓名", "身份证号码","民族", "年龄","性别","出生日期","婚姻状况","手机号码","文化程度","就业情况","就业意向"];
export default {
  data() {
    return {
      tableDataBegin: [],
      tableDataName: "",
      tableDataEnd: [],
      currentPage: 1,
      pageSize: 2,
      totalItems: 0,
      filterTableDataEnd: [],
      flag: false,

      form:[],
      studyid:"",
      radio1:"",
      radio2:"",
      radio3:"",
      labelPosition: "right",
      input: "",
      tableData: [],
      search: '',
      tableHeight: window.innerHeight - 220,
      dialogVisible: false,
      dialogVisibletwo: false,
      checkAll: false,
      checkedCities: ["姓名", "身份证号码","民族", "年龄","性别","出生日期","婚姻状况","手机号码","文化程度","就业情况","就业意向"],
      cities: [
        { name: "姓名", id: "username" },
        { name: "身份证号码", id: "user_code" },
        { name: "手机号码", id: "mobile" },
        { name: "民族", id: "minzu" },
        { name: "年龄", id: "age" },
        { name: "性别", id: "sex" },
        { name: "出生日期", id: "birth" },
        { name: "婚姻状况", id: "mer_status" },
        { name: "文化程度", id: "learn_level" },
        { name: "就业情况", id: "job_status" },
        { name: "就业意向", id: "job_to" },
      ],
      isIndeterminate: true,
      formLabelAlign: {},
      disabledInput: false,
      dialogVisibleSucc: false,
      dialogVisibleUpload: false,
      //摄像头
      videoWidth: 300,
      videoHeight: 300,
      imgSrc: '',
      thisCancas: null,
      thisContext: null,
      thisVideo: null,
      studentId:"",
      inputname: "", //搜索值姓名
      inputuser_code: "", //搜索值身份证号
      inputmobile: "", //搜索值手机号
      is_dela:"",
      pic:"",
      avatarimg:"",
      value:"",
      zscode:"",
      classId:'',
      datalists:'',
      loading:false,
    };
  },
  created() {
    this.get_classLists();
    this.traineeLists();
    this.totalItems = this.tableDataBegin.length;
    if (this.totalItems > this.pageSize) {
      for (let index = 0; index < this.pageSize; index++) {
        this.tableDataEnd.push(this.tableDataBegin[index]);
      }
    } else {
      this.tableDataEnd = this.tableDataBegin;
    }
  },
  methods: {
    //清除筛选条件
    Clearfiltera(val){
      console.log(val);
      this.value = null
      this.loading = true
      setTimeout(() => {
      this.traineeLists()
      }, 500);
      
      setTimeout(() => {
      this.loading = false;
      }, 1000);
      // this.tableDataBegin = 
    },
    clearFilter() {
      // console.log(11111);
      this.$refs.filterTable.clearFilter();
    },
    //筛选
    filterHandler(value, row, column) {
        const property = column['property'];
        return row[property] === value;
      },
      //班级列表
    async get_classLists(){
      let class_lists = (await this.$api.home.get_classLists()).data.data
      console.log('class_lists',class_lists);
      this.classId = class_lists
      console.log(class_lists);
    },
    //学员列表
    async traineeLists(){
      let lists = (await this.$api.home.traineeLists()).data.data
      this.tableDataBegin = lists
      this.tableDataEnd = lists
      this.form = lists
      this.datalists= lists
    },
    selectGet(e){
      console.log("111111");
      let obj = {};
      obj = this.classId.find((item)=>{//这里的userList就是上面遍历的数据源
          return item.id === e;//筛选出匹配数据
      });
      console.log(obj.name);//我这边的name就是对应label的
      console.log(e);
      let searchText = e;
      let list = [];
      console.log("2",this.tableDataEnd);
      if (searchText) {
        let a = this.datalists
        var data = a.filter(function(item){
          return item.class_id == searchText
        })
        this.tableDataEnd = data;
      } else {
        this.traineeLists();
      }
    },
    //编辑
    handleEdit(row) {
      this.studentId = row.id
      this.formLabelAlign = row;
      this.disabledInput = false;
      this.dialogVisible = true;
    },
    //编辑操作
    async edit(){
      let traineeAdd = await this.$api.home.traineeUpdate({
        username:this.formLabelAlign.username,
        user_code:this.formLabelAlign.user_code,
        minzu:this.formLabelAlign.minzu,
        age:this.formLabelAlign.age,
        sex:this.radio1,
        card_img:this.formLabelAlign.card_img,
        birth:this.formLabelAlign.birth,
        mer_status:this.radio2,
        mobile:this.formLabelAlign.mobile,
        learn_level:this.radio3,
        job_status:this.formLabelAlign.job_status,
        id:this.studentId,
      })
      let a = traineeAdd.data
      if(a.code == 200){
        this.dialogVisible = false
        this.$notify({
          title: "成功",
          message: a.msg,
          type: "success",
        });
      }else{
        this.$notify.error({
          title: '错误',
          message: a.msg
        });
      }
    },
    handleClose(done) {
      done();
    },
    // 上传
    uploadClick(row) {
      this.formLabelAlign = row;
      this.studyid = row.id
      this.disabledInput = false;
      this.dialogVisibleUpload = true;
    },
    getValue(){
    },
    //上传证书
    async uploda(){
      let uploda = (await this.$api.home.datumLoad({
        uid:this.studyid,
        certify_code:this.zscode,
        certify_img:this.pic
      })).data
      if(uploda.code == 403){
        this.$notify.error({
          title: '错误',
          message: uploda.msg
        });
      }else{
        this.dialogVisibleUpload = false
      }
    },
    beforeAvatarUpload(file) {
      //上传前的函数
      //上传前对图片类型和大小进行判断
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    handleAvatarSuccess(res, file) {
      this.pic = "http://px.0123china.cn"+res.pic//上传图片接口
      this.picc = URL.createObjectURL(file.raw);
    },
    openData() {},
    handleSizeChange(val) {
      this.pageSize = val;
      this.handleCurrentChange(1);
    },
    //查看证书
    successClick(index, row){
      this.dialogVisibleSucc = true
      this.value = row.id
      this.avatarimg = row.certify_img
      this.form = this.tableDataEnd[index];
    },
    // 导出
    deriveClick() {
      this.dialogVisibletwo = true;
    },
    // 导出字段
    handleCheckAllChange(val) {
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      this.arr1 = value.map(item=>item.name).slice(11)
      this.arr2 = value.map(item=>item.id).slice(11)
      let a = JSON.parse(JSON.stringify(this.arr1))
      let b = JSON.parse(JSON.stringify(this.arr2))
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },
    // 确定导出
    dialogVisibleClick(value) {
      this.dialogVisibletwo = false;
      this.export2Excel();
    },
    // 导出
    export2Excel() {
      require.ensure([], () => {
        const { export_json_to_excel } = require("../../excal/Export2Excel");
        
        let a = JSON.parse(JSON.stringify(this.arr1))
        let b = JSON.parse(JSON.stringify(this.arr2))
        const tHeader = a; // 上面设置Excel的表格第一行的标题
        const filterVal = b; // 上面的index、phone_Num、school_Name是tableData里对象的属性
        const list = this.tableDataEnd; //把data里的tableDataEnd存到list
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, "学员列表");
      });
    },
    formatJson(filterVal, jsonData) {
      console.log("jsonData",jsonData);
      console.log('this.alllis',this.alllists);
      let bool = JSON.stringify( this.alllists !== "")
      console.log("qqqqqq",JSON.stringify( this.alllists !== ""));
      var c = jsonData.indexOf("");
      console.log("c",c);
      var allls = jsonData
      if(JSON.stringify(this.alllists) == false){
        console.log(1111);
        var a = []
        a.push(this.alllists)
        console.log("a",a);
        for(var i=0;i<a.length;i++){
          a[i].sex === 1?jsonData[i].sex = '男': a[i].sex = '女'
          a[i].mer_status === 2?a[i].mer_status = '未婚': a[i].mer_status = '已婚'
          a[i].job_status === 1?a[i].job_status = '未就业': a[i].job_status = '已就业'
        }
        console.log("11111111");
        return a.map((v) => filterVal.map((j) => v[j]));        
      }else{
        console.log("2222222");
        for(var i=0;i<allls.length;i++){
          allls[i].sex === 1?allls[i].sex = '男': allls[i].sex = '女'
          allls[i].mer_status === 2?allls[i].mer_status = '未婚': allls[i].mer_status = '已婚'
          allls[i].job_status === 1?allls[i].job_status = '未就业': allls[i].job_status = '已就业'
        }
        return allls.map((v) => filterVal.map((j) => v[j]));
        
      }
      
    },
    searchClick() {
    },
    formatter(row, column) {
      return row.address;
    },
    //移除
    async handleDelete(index, rows) {
      let a =rows.id
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
      }).then(async()=>{
        let delet = (await this.$api.home.traineeDelet({
        id:a
      })).data
      if(delet.code == 200){
        this.$notify({
          title: '成功',
          message: delet.msg,
          type: 'success'
        });
      }
      else if(rows.is_del == 1){
        this.$notify.error({
          title: '错误',
          message: "删除待审核"
        });
      }
      else{
        this.$notify.error({
          title: '错误',
          message: delet.msg
        });
      }
      }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      
    },

    //摄像头权限
    // 调用权限（打开摄像头功能）
   getCompetence () {
    var _this = this
    this.thisCancas = document.getElementById('canvasCamera')
    this.thisContext = this.thisCancas.getContext('2d')
    this.thisVideo = document.getElementById('videoCamera')
    // 旧版本浏览器可能根本不支持mediaDevices，我们首先设置一个空对象
    if (navigator.mediaDevices === undefined) {
     navigator.mediaDevices = {}
    }
    // 一些浏览器实现了部分mediaDevices，我们不能只分配一个对象
    // 使用getUserMedia，因为它会覆盖现有的属性。
    // 这里，如果缺少getUserMedia属性，就添加它。
    if (navigator.mediaDevices.getUserMedia === undefined) {
     navigator.mediaDevices.getUserMedia = function (constraints) {
      // 首先获取现存的getUserMedia(如果存在)
      var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia
      // 有些浏览器不支持，会返回错误信息
      // 保持接口一致
      if (!getUserMedia) {
       return Promise.reject(new Error('getUserMedia is not implemented in this browser'))
      }
      // 否则，使用Promise将调用包装到旧的navigator.getUserMedia
      return new Promise(function (resolve, reject) {
       getUserMedia.call(navigator, constraints, resolve, reject)
      })
     }
    }
    var constraints = { audio: false, video: { width: this.videoWidth, height: this.videoHeight, transform: 'scaleX(-1)' } }
    navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
     // 旧的浏览器可能没有srcObject
     if ('srcObject' in _this.thisVideo) {
      _this.thisVideo.srcObject = stream
     } else {
      // 避免在新的浏览器中使用它，因为它正在被弃用。
      _this.thisVideo.src = window.URL.createObjectURL(stream)
     }
     _this.thisVideo.onloadedmetadata = function (e) {
      _this.thisVideo.play()
     }
    }).catch(err => {
     console.log(err)
    })
   },
// 绘制图片（拍照功能）
  
   setImage () {
    var _this = this
    // 点击，canvas画图
    _this.thisContext.drawImage(_this.thisVideo, 0, 0, _this.videoWidth, _this.videoHeight)
    // 获取图片base64链接
    var image = this.thisCancas.toDataURL('image/jpg')
    _this.imgSrc = image
    this.$emit('refreshDataList', this.imgSrc)
   },
// base64转文件
  
   dataURLtoFile (dataurl, filename) {
    var arr = dataurl.split(',')
    var mime = arr[0].match(/:(.*?);/)[1]
    var bstr = atob(arr[1])
    var n = bstr.length
    var u8arr = new Uint8Array(n)
    while (n--) {
     u8arr[n] = bstr.charCodeAt(n)
    }
    return new File([u8arr], filename, { type: mime })
   },
// 关闭摄像头
  
   stopNavigator () {
    this.thisVideo.srcObject.getTracks()[0].stop()
   
  },

    handleCurrentChange(val) {
      this.currentPage = val;
      //需要判断是否检索
      if (!this.flag) {
        this.currentChangePage(this.tableDataBegin);
      } else {
        this.currentChangePage(this.filterTableDataEnd);
      }
    },
    //组件自带监控当前页码
    currentChangePage(list) {
      let from = (this.currentPage - 1) * this.pageSize;
      let to = this.currentPage * this.pageSize;
      this.tableDataEnd = [];
      for (; from < to; from++) {
        if (list[from]) {
          this.tableDataEnd.push(list[from]);
        }
      }
    },
    //搜索姓名
    searchClickname() {
      let searchText = this.inputname;
      let list = [];
      if (searchText) {
        list = this.tableDataEnd.filter(e => {
          return e.username.match(searchText);
        });
        this.tableDataEnd = list;
      } else {
        this.traineeLists();
      }
    },
    //搜索身份证号
    searchClickuser_code() {
      let searchText = this.inputuser_code;
      let list = [];
      if (searchText) {
        list = this.tableDataEnd.filter(e => {
          return e.user_code.match(searchText);
        });
        this.tableDataEnd = list;
      } else {
        this.traineeLists();
      }
    },
    //搜索手机号
    searchClickmobile() {
      let searchText = this.inputmobile;
      let list = [];
      if (searchText) {
        list = this.tableDataEnd.filter(e => {
          return e.mobile.match(searchText);
        });
        this.tableDataEnd = list;
      } else {
        this.traineeLists();
      }
    },
  },
};
</script>
<style lang="less" scoped>
/deep/.el-input .el-input--suffix{
  height: 28px;
}
.avatar{
  width: 60%;
  height: 60%;
}
.avatar-uploader-icon{
  width: 80px;
  height: 80px;
}
.chackimg{
  width: 100%;
  height: 100%;
}
.edit_head {
  display: flex;
  // justify-content: space-between;
  align-items: center;
  .input-with-select {
    max-width: 350px;
    margin-left: 20px;
  }
}
.el-tag {
  cursor: pointer;
}
//搜索框文字
 .spansearch{
   color: #409EFF;
   font-size: 15px;
   margin-left: 20px;
 }
//摄像头
.camera_outer{
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  background-size: 100%;
  video,canvas,.tx_img{
   -moz-transform:scaleX(-1);
   -webkit-transform:scaleX(-1);
   -o-transform:scaleX(-1);
   transform:scaleX(-1);
  }
  .btn_camera{
   position: absolute;
   bottom: 4px;
   left: 0;
   right: 0;
   height: 50px;
   background-color: rgba(0,0,0,0.3);
   line-height: 50px;
   text-align: center;
   color: #ffffff;
  }
  .bg_r_img{
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   top: 0;
  }
  .img_bg_camera{
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   top: 0;
   img{
    width: 100%;
    height: 100%;
   }
   .img_btn_camera{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: rgba(0,0,0,0.3);
    color: #ffffff;
    .loding_img{
     width: 50px;
     height: 50px;
    }
   }
  }
 }
</style>